<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=a, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>



    <style>
        ul{list-style-type: none;
        padding:0px;
        margin:0px;    
        }
        li{width: 100px;}
        ul.lanmu>li{
            background-color: blue;
            color: white;
        }
        ul.caidan>li{
            background-color: white;
            color: black;
            display: none;
        }
    
    </style>
</head>
<body>
    <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
        <li>菜单6</li>
        <li>菜单7</li>
        <li>菜单8</li>
        <li>菜单9</li>
        <li>菜单10</li>
    </ul>  

    <ul class="lanmu">
        <li class="class1">栏目1
            <ul class="caidan">
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
            </ul>
        </li>
        <li class="class1">
                <ul class="caidan">栏目2
                    <li>菜单1</li>
                    <li>菜单2</li>
                    <li>菜单3</li>
                </ul>
            </li>
         <li class="class1">
                    <ul class="caidan">
                        <li>菜单1</li>
                        <li>菜单2</li>
                        <li>菜单3</li>
                    </ul>
        </li>
    </ul>
    
        <script>
            // $('ul>li').each(function(index,el){   
            //       console.log(index,el);
            //       console.log(el==this);
            //       if(index ==5){
            //         $(this).css("color","red");
            //       }
            // })
            // console.log($('from .basketball').val()
            // $('ul li:first').text('<h1>第一个标签</h1>');        
      $('ul.lanmu >li').click(function(){
            $(this).siblings().children().children().css('display','none');
            $(this).children().children().css('display','block');
            
        })
        </script>
</body>
</html>